<template>
    <div class="list">
        <div class="header">
            <div class="left">销售排行榜</div>
            <div class="right">
                <el-select class="store-select" v-model="state.saleTimeType" @change="getList" placeholder="Select">
                    <el-option
                        v-for="item in marketDateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    <template #prefix>
                        <el-icon><Calendar /></el-icon>
                    </template>
                </el-select>
            </div>
        </div>
        <div class="table" v-loading="state.loading">
            <el-table :data="state.list" stripe style="width: 100%">
                <el-table-column prop="date" label="排名" width="100">
                    <template #default="{ $index }">
                        <div>
                            <img v-if="$index === 0" class="sign_img" src="@/assets/imgs/logo/one.png" alt="" />
                            <img v-else-if="$index === 1" class="sign_img" src="@/assets/imgs/logo/two.png" alt="" />
                            <img v-else-if="$index === 2" class="sign_img" src="@/assets/imgs/logo/three.png" alt="" />
                            <div v-else class="sign">{{ $index + 1 }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="goodsName" :show-overflow-tooltip="true" />
                <el-table-column prop="saleNumber" label="销量" width="100" />
                <template #empty>
                    <div class="empty_table">
                        <img style="width: 50%" src="@/assets/imgs/logo/default.png" />
                        <div class="empty_content">暂无销量数据</div>
                    </div>
                </template>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { packSelectObjUtil, format } from '@/commons/utils.js';
import storage from '@/commons/storage';
import constants from '@/commons/constants';
import { isObject } from '@/commons/utils';
import request from '@/request';
import { computed, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
const marketDateOptions = packSelectObjUtil(constants.MARKET_DATE);

const state = reactive({
    saleTimeType: 1,
    list: [],
    loading: false
});
// 刷新页面取一次
const shopInfo = computed(() => {
    const shopObj = storage.get('ZW-AUTH')?.shopList.find(x => x.shopId === storage.get('ZW-SHOPID')) || {};
    return shopObj;
});
const getList = async () => {
    state.loading = true;
    const now = new Date();
    const date = {
        1: {
            createdStartAt: format(new Date(now.getTime() - 60 * 60 * 24 * 1000), 'YYYYMMDD'),
            createdEndAt: format(new Date(now.getTime() - 60 * 60 * 24 * 1000), 'YYYYMMDD')
        },
        2: {
            createdStartAt: format(new Date(now.getTime() - 60 * 60 * 24 * 1000 * 2), 'YYYYMMDD'),
            createdEndAt: format(new Date(now.getTime() - 60 * 60 * 24 * 1000 * 2), 'YYYYMMDD')
        },
        3: {
            createdStartAt: format(
                new Date(now.getTime() - 60 * 60 * 24 * 1000 * (now.getDay() === 0 ? 6 : now.getDay() - 1)),
                'YYYYMMDD'
            ),
            createdEndAt: format(now, 'YYYYMMDD')
        },
        4: {
            createdEndAt: format(now, 'YYYYMMDD'),
            createdStartAt: format(now.setDate(1), 'YYYYMMDD')
        },
        5: {
            createdEndAt: format(now, 'YYYYMMDD'),
            createdStartAt: format(new Date(shopInfo.value.createdAt), 'YYYYMMDD') || '20220801'
        }
    };
    try {
        const { data } = await request('queryCommoditiesRankServ', date[state.saleTimeType]);
        state.loading = false;
        state.list = Array.isArray(data) ? data : [];
    } catch (error) {
        if (!isObject(error)) return;
        ElMessage.error(error.msg);
    }
};

onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.list {
    background-color: #fff;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 24px;
        border-bottom: 1px solid #eaeaea;
    }
    .table {
        padding: 24px;
        .sign_img {
            width: 20px;
            height: 25px;
        }
        .sign {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #eeeeee;

            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #585858;
        }
    }
    .empty_table {
        padding: 100px 0;
    }
}
</style>
